<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{

            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑";

        }
        #main{
            /*border: 1px solid red;*/
            width: 400px;
            height: 600px;
            background-image: url("image/background_2.png");
            margin-left: 500px;
            position: absolute;
            overflow: hidden;
        }
        #titleSorce{
            font:bolder 30px "微软雅黑";

        }
        #title{
            margin-top: 150px;
            margin-left: 100px;
            -webkit-animation: fontChange 5s infinite linear;
            -webkit-transition: all 1s linear;
        }
        .mybtn{
            /*border: 1px solid red;*/
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: #dcdcdc;
            border-radius: 15px;
            margin-bottom: 25px;
            margin-left: 130px;
            color: gray;
            cursor: pointer;
        }

        #stopGame{
            width: 30px;
            height: 30px;
            border-radius: 30px;
            text-align: center;
            line-height: 30px;
            border: 3px solid gray;
            color: gray;
            float: right;
            margin-right: 10px;
            margin-top: 10px;
            cursor: pointer;
            display: none;
        }
        #stopUI{
            border:1px solid red;
            width: 1345px;
            height:645px;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(0,0,0,0.5);
            display: none;

        }
        #stopUI .mybtn{
            position: relative;
            left: 500px;
            top: 250px;
        }
        @-webkit-keyframes fontChange{
            0%{
                color: #ffae62;
            }
            25%{
                color: #FF8E95;
            }
            50%{
                color:#FFC4E8;
            }
            100%{
                color:aqua;
            }
        }
    </style>
</head>
<!--20  加onkeydown  加完后到21  创建函数，在createSmallPlane上方  true的时候-->
<!--26  加onkeyup  加完后到27 false的时候-->
<body onkeydown="playerMoveStateTrue()" onkeyup="playerMoveStateFalse()">
<div id="main" style="height:600px;" >
    <div id="stopGame" onclick="stopGameOver()">||</div>
    <div id="titleSorce">
        <div>杀敌:</div>
        <div>总分:</div>
    </div>

    <div id="title"><h1>一起来打飞机吧</h1></div>
    <div id="btn1" class="mybtn" onclick="StartGame()">Start Game</div>
    <div id="btn2" class="mybtn" onclick="closeGame()">Exit</div>
</div>
<script>
    var smallPlaneList = new Array();
    var player;
    var leftState=false;
    var rightState=false;
    var topState=false;
    var downState=false;
    var bulletList=new Array();
    var shotState=false;
    var mainObj=document.getElementById("main");
    function StartGame(){
        var titleObj =document.getElementById("title");
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        titleObj.style.display="none";
        btn1.style.display="none";
        btn2.style.display="none";
        window.setInterval(createSmallPlane,300);
        setInterval(smallPlaveMove,100);

        player=new playerPlane("image/my-plane.gif",66,82);
        setInterval(playMove,10);
        setInterval(bulletMove,10);
// 22 一进入游戏，碰撞函数就要调用
        setInterval(bulletAndPlane,10);
    }
//    21 创建碰撞函数
    function bulletAndPlane() {
//        23 敌机和我方子弹碰撞
        for(var i=0;i<smallPlaneList.length;i++){
//            获取敌方飞机坐标
            var xStart=parseInt(smallPlaneList[i].imageNode.style.left);
            var yStart=parseInt(smallPlaneList[i].imageNode.style.top);
            var xEnd=xStart+parseInt(smallPlaneList[i].imgWidth);
            var yEnd=yStart+parseInt(smallPlaneList[i].imgHeight);
            for(var j=0;j<bulletList.length;j++){
//                获取子弹的坐标
                var bulletX=parseInt(bulletList[j].imageNode.style.left);
                var bulletY=parseInt(bulletList[j].imageNode.style.top);
                if(smallPlaneList[i].isDie==false&&bulletList[j].isDie==false&&bulletX>xStart-bulletList[j].imgWidth&&bulletX<=xEnd&&bulletY>=yStart&&bulletY<=yEnd){
                    console.log("打中了！！！！！");
                    smallPlaneList[i].imageNode.src="image/smallplan.gif";
                    smallPlaneList[i].isDie=true;
                    bulletList[j].isDie=true;
                }
            }
        }
    }
    function bulletMove() {
        for(var i=bulletList.length-1;i>=0;i--){
            bulletList[i].move();
            if(parseInt(bulletList[i].imageNode.style.top)<0){
                mainObj.removeChild(bulletList[i].imageNode);
                bulletList.splice(i,1);
            }
        }
    }
    function playMove() {
        if(leftState==true){
            player.leftMove();
        }
        if(rightState==true){
            player.rightMove();
        }
        if(topState==true){
            player.topMove();
        }
        if(downState==true){
            player.downMove();
        }
        if(shotState==true){
            player.shot();
        }
    }
    function playerMoveStateTrue() {
        var e=window.event||arguments[0];  //获取按键
        console.log(e.keyCode);  //查看按键的id  38  37 39 40
//        if(e.keyCode==38){   //如果按按上键  就往上走  下面写完后直接运行  效果不对，不能斜着，还有卡顿要修改
////            因为在js中一次按键  只能触发一个，上一个事件会被替换   这部分写完后就注释掉，重新写新的--22  到全局变量
//            player.topMove();
//        }else if(e.keyCode==37){
//            player.leftMove();
//        }else if(e.keyCode==40){
//            player.downMove();
//        }else if(e.keyCode==39){
//            player.rightMove();
//        }
        if(e.keyCode==38){
            topState=true;
        }
        if(e.keyCode==39){
            rightState=true;
        }
        if(e.keyCode==40){
            downState=true;
        }
        if(e.keyCode==37){
            leftState=true;
        }
        if(e.keyCode==32){
            shotState=true;
        }
    }
    function playerMoveStateFalse() {
        var e = window.event || arguments[0];  //获取按键
        console.log(e.keyCode);
        if (e.keyCode == 38) {
            topState = false;
        }
        if (e.keyCode == 39) {
            rightState = false;
        }
        if (e.keyCode == 40) {
            downState = false;
        }
        if (e.keyCode == 37) {
            leftState = false;
        }
        if(e.keyCode==32){
            shotState=false;
        }
    }
    function createSmallPlane() {
//        25 传值小飞机的宽度和高度
        var sp =new smallPlane("image/enemy1_fly_1.png",34,24);//这一句是给出飞机路径，创建飞机，但是
        sp.init();
        smallPlaneList.push(sp);
    }
    function smallPlaveMove(){
        for(var i=smallPlaneList.length-1;i>=0;i--){
//            smallPlaneList[i].move();  //这个地方使用全局变量小飞机，因为要调用move方法  到7的位置
//            27改变飞机死亡状态，死了就不飞
            if(smallPlaneList[i].isDie==false){
                smallPlaneList[i].move();
            }else{
                smallPlaneList[i].timeDie++;
                if(smallPlaneList[i].timeDie>=10){
                    mainObj.removeChild(smallPlaneList[i].imageNode);
                    smallPlaneList.splice(i,1);
                }
            }
        }

    }
    function smallPlane(imgSrc,imgWidth,imgHeight) {
        this.imageNode=document.createElement("img"); //当前飞机图片的节点，需要创建
        this.imgSrc=imgSrc;  //图片路径 需要传值
        this.blood=10; //血量 假设10滴血
        this.x=parseInt(Math.random()*380); //飞机的x轴  从不同的位置出来，随机出来,根据背景图片来定宽高，注意0,0点的位置
        this.y=-(parseInt(Math.random()*80)+20);//飞机的y轴,-是因为最开始要看不到
        this.speed=parseInt(Math.random()*10)+1; //飞机的速度，随机产生 1-10的速度
//        24  给小飞机加宽度和高度
        this.imgWidth=imgWidth;
        this.imgHeight=imgHeight;
//26 加入敌方飞机的死亡状态
        this.isDie=false;
//        加入一个状态  时间到了后小飞机消失
        this.timeDie=0;
        this.init=function () {
            this.imageNode.src=this.imgSrc;  //初始化节点路径
            this.imageNode.style.position="absolute";  //位置样式初始化
            this.imageNode.style.left=this.x+"px"; //x轴的初始化
            this.imageNode.style.top=this.y+"px"; //y周的初始化
            var mainObj=document.getElementById("main"); //获取main的节点
            mainObj.appendChild(this.imageNode); //把节点的内容加入到main父亲上面去
        };
        this.move=function () {
            this.imageNode.style.top=parseInt(this.imageNode.style.top)+this.speed+"px";
        }
    }
    //-------------------------第一部分结束
    function playerPlane(imgSrc,imgWidth,imgHeight){
//        创建img节点
        this.imageNode=document.createElement("img");
        this.imgSrc=imgSrc;
        this.x=200;
        this.y=400;
        this.speed=5;
        this.imgWidth=imgWidth;
        this.imgHeight=imgHeight;

        this.shotPI=0;


        this.init=function(){
            this.imageNode.src=this.imgSrc;
            this.imageNode.style.position="absolute";
            this.imageNode.style.top=this.y+"px";
            this.imageNode.style.left=this.x+"px";
            var mainObj=document.getElementById("main");
            mainObj.appendChild(this.imageNode);
        }

        this.leftMove=function () {
            this.imageNode.style.left=parseInt(this.imageNode.style.left)-this.speed+"px";

        }
        this.rightMove=function () {
            this.imageNode.style.left=parseInt(this.imageNode.style.left)+this.speed+"px";

        }
        this.topMove=function () {
            this.imageNode.style.top=parseInt(this.imageNode.style.top)-this.speed+"px";

        }
        this.downMove=function () {
            this.imageNode.style.top=parseInt(this.imageNode.style.top)+this.speed+"px";

        }
        this.shot=function () {
//            射击
//            var x=parseInt(this.imageNode.style.left);
//            var y=parseInt(this.imageNode.style.top);
////            var b=new bullet("bullet.png",x,y);  //到此创建一个子弹，因为子弹有很多，所以需要把子弹放入数组当中
////            var b=new bullet("bullet.png",x+this.imgWidth,y);
//            var b=new bullet("bullet.png",x+this.imgWidth/2,y,6,14);
////            34，加入push
//           bulletList.push(b);
            if(this.shotPI==0){
                var x=parseInt(this.imageNode.style.left);
                var y=parseInt(this.imageNode.style.top);
                var b=new bullet("image/bullet1.png",x+this.imgWidth/2,y,6,14);
                bulletList.push(b);
            }
            this.shotPI++;
            if(this.shotPI>=20){
                this.shotPI=0;
            }

        };
        this.init();

    }
    //---------创建子弹
    function bullet(imgSrc,x,y,imgwidth,imgHeight) {
        this.imageNode=document.createElement("img");
        this.imgSrc=imgSrc;
        this.x=x; //注意x和y都是从子弹传过来的
        this.y=y;

        this.imgWidth=imgwidth;
        this.imgHeight=imgHeight;

        this.speed=5;

//        28  子弹死亡状态
        this.isDie=false;
        this.init=function () {
            this.imageNode.src=this.imgSrc;
            this.imageNode.style.position="absolute";
//            this.imageNode.style.top=this.y+"px";
            this.imageNode.style.top=this.y-this.imgHeight+"px";
//            this.imageNode.style.left=this.x+"px";
            this.imageNode.style.left=this.x-this.imgWidth/2+"px";

            var mainObj=document.getElementById("main");
            mainObj.appendChild(this.imageNode);
        };
        this.move=function(){
            this.imageNode.style.top=parseInt(this.imageNode.style.top)-this.speed+"px";
        };
        this.init();
    }
</script>
</body>
</html>